<template>
  <section class="container-right">
    <div class="title cursor-pointer" @click="openModal(1)">党员队伍</div>
    <div class="team-box flex mt-14px">
      <div class="team-item flex-1 flex">
        <div class="team-text">
          <strong class="color-#89C6D8 text-18px">预备党员转正</strong>
          <p class="text-14px">(近3个月)</p>
        </div>
        <div class="team-img text-center">{{ topData.tjsj1 }}</div>
      </div>
      <div class="team-item flex-1 flex">
        <div class="team-text">
          <strong class="color-#EEB89E text-18px">组织关系转换</strong>
          <p class="text-14px">(近3个月)</p>
        </div>
        <div class="team-img color-#D5FCCD text-center">{{ topData.tjsj2 }}</div>
      </div>
    </div>
    <div class="honor-box">
      <div class="bg-title">
        <span>党员荣誉</span>
      </div>
      <div class="chart-container">
        <div class="chart">
          <img src="@/assets/images/sjx.png" alt="" class="w-full" />
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="index">{{ item.name }}&emsp;{{ item.value }}</li>
        </ul>
      </div>
      <dl>
        <dt class="flex">
          <div class="flex-1 bg-title">
            <span>先进事迹</span>
          </div>
          <div class="flex-1 bg-title">
            <span>志愿活动</span>
          </div>
        </dt>
        <dd class="mr-10px">
          <div class="flex">
            <img src="@/assets/images/icon-f.png" alt="" width="60px" height="60px" />
            <strong class="text-56px">{{ topData.tjsj7 }}</strong>
          </div>
          <p>获得表扬信感谢信等</p>
        </dd>
        <dd class="ml-10px">
          <div class="flex">
            <img src="@/assets/images/icon-f.png" alt="" width="60px" height="60px" />
            <strong class="text-56px">{{ topData.tjsj8 }}</strong>
          </div>
          <p>志愿者活动次数</p>
        </dd>
      </dl>
    </div>
    <div class="title study-task mt-20px">
      <span>学习任务</span>
    </div>
    <div class="mt-25px h-250px">
      <CdcTable :data="tableConfig1" class="task-table"></CdcTable>
    </div>
    <!-- 党员队伍 -->
    <partyMember ref="refPartyMember"></partyMember>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import CdcTable from '@/components/CdcTable/index.vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { FunnelChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import partyMember from '@/views/home/components/partyMember.vue'
import VChart from 'vue-echarts'
use([CanvasRenderer, TooltipComponent, FunnelChart])
import { partyTeam, studyTask } from '@/api'
const tableData1 = ref([])
const tableConfig1 = computed(() => {
  return {
    columns: [
      { field: 'department_name', title: '党支部名称', minWidth: 130 },
      { field: 'bywcl', type: 'html', title: '本月发布学习<br/>任务完成率', minWidth: 100 },
      { field: 'sywcl', type: 'html', title: '上月发布学习<br/>任务完成率', minWidth: 100 },
    ],
    showSeq: false,
    tableConfig: {
      data: tableData1.value,
      align: 'center',
      showSeq: true,
      'header-cell-class-name': 'headCellClass',
      'header-row-class-name': 'bg-#555 text-16px table-left text-#FDFDFB ',
      'row-class-name': ({ $rowIndex }: any) => {
        return `bg-#253542 text-#FDFDFB text-20px`
      },
      'cell-class-name': ({ $rowIndex }) => {
        return `py-10px border-b-12px border-transparent border-solid border-x-0 ${$rowIndex == 0 ? 'border-t-12px' : ' '}`
      },
    },
  }
})

const refPartyMember = ref<InstanceType<typeof partyMember>>()
const openModal = (num: number) => {
  if (num === 1) {
    // 党员队伍
    refPartyMember.value?.open()
  }
}
const topData = reactive({
  tjsj1: 0,
  tjsj2: 0,
  tjsj3: 0,
  tjsj4: 0,
  tjsj5: 0,
  tjsj6: 0,
  tjsj7: 0,
  tjsj8: 0,
})
const list = computed(() => {
  return [
    { name: '国家级', value: topData.tjsj3 },
    { name: '省级', value: topData.tjsj4 },
    { name: '厅局级', value: topData.tjsj5 },
    { name: '中心级', value: topData.tjsj6 },
  ]
})
const init = () => {
  partyTeam().then((res) => {
    Object.assign(topData, res.data[0]?.statData)
  })
  studyTask().then((res) => {
    tableData1.value = res.data[0]?.statData.tjsj1 || []
  })
}
onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.container-right {
  padding-left: 16px;
  padding-right: 36px;
  .team-box {
    // padding-left: 18px;
    padding-bottom: 20px;
    background: url('@/assets/images/malebg.png') no-repeat 100% 100%;
    background-size: contain;
    .team-item {
      strong {
        display: block;
        font-weight: 400;
        padding-top: 10px;
      }
      p {
        margin-top: 10px;
      }
      .team-img {
        padding-bottom: 32px;
        line-height: 1;
        font-size: 44px;
        color: #ffffff;
        width: 86px;
        background: url('@/assets/images/icon_duiwu.png') no-repeat center bottom;
        background-size: contain;
      }
    }
  }
  .title {
    padding-top: 16px;
    font-family: HYk2gj;
    font-style: italic;
    font-size: 24px;
    color: #fdfdfb;
    line-height: 24px;
    letter-spacing: 10px;
    background: url('@/assets/images/icon_sanjiaoxin.png') no-repeat right center;
    background-size: 35px 31px;
    // background-size: contain;
    &.study-task {
      background: none;
      // url('@/assets/images/image_background.png') no-repeat left center,
      // url('@/assets/images/icon_sanjiaoxin.png') no-repeat right center;
    }
    span {
      display: block;
      width: 100%;
      height: 100%;

      // background: url('@/assets/images/image_background.png') no-repeat 100% 100%;
    }
  }
  /deep/ .table-left {
    background-image: url('@/assets/images/t-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  /deep/ .headCellClass {
    &:not(:last-child) {
      .vxe-cell {
        border-right: 1px solid #fff;
      }
    }
  }
  /deep/ .headerRowClass {
    background-image: url('@/assets/images/t-bg.png');
  }
  /deep/ .vxe-table--render-wrapper {
    background-color: transparent;
    .vxe-table--body-wrapper {
      background-color: transparent;
    }
  }
  .honor-box {
    margin-top: 26px;
    .bg-title {
      padding-left: 36px;
      background: url('@/assets/images/ling-xing2.png') no-repeat left center;
      span {
        font-family: HYk2gj;
        font-size: 20px;
        color: transparent;
        background: linear-gradient(to bottom, #fafafc 0%, #bdf3f5 100%);
        -webkit-background-clip: text;
      }
    }
    .chart-container {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding-bottom: 30px;
      .chart {
        padding: 20px 10px;
        width: 140px;
        background: url('@/assets/images/rect.png') repeat;
        .funnel-chart {
          width: 100%;
          height: 100px;
        }
      }
      ul {
        flex: 1;
        margin-left: 30px;
        margin-bottom: 15px;
        color: #fff;
        font-size: 20px;
        li {
          margin-top: 6px;
        }
      }
    }
    dl {
      dd {
        display: inline-block;
        background: url('@/assets/images/rect.png') repeat;
        margin-top: 30px;
        padding: 10px;
        width: calc(50% - 10px);
        padding-left: 36px;
        overflow: hidden;
        p {
          margin-top: 10px;
          font-size: 14px;
        }
        strong {
          margin-left: 20px;
        }
      }
    }
  }
}
:deep(.task-table table) {
  border-collapse: collapse;
}
</style>
